<template>
    <div>
      <el-table :data="activityList" highlight-current-row class="el-table-style">
        <el-table-column type="index" width="75" sortable></el-table-column>
        <el-table-column label="短信内容" sortable>
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="发送时间" sortable></el-table-column>
        <el-table-column prop="receiving_num" label="收件人数" sortable></el-table-column>
        <el-table-column label="发送状态" sortable>
          已发送
        </el-table-column>
        <el-table-column prop="abnormal_quantity" label="异常数量/条" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" class="danger-btn" size="mini" @click="onReceiving(scope.row.id)">查看收件人</el-button>
            <el-button type="danger" class="danger-btn" size="mini"  @click="delSms(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="footer-bar">
        <div class="page-code">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </el-col>
      <!--    添加通讯录-->
      <el-dialog title="收件人列表" :visible.sync="addFormVisible" width="50%">
        <el-table :data="addresseeList" highlight-current-row class="el-table-style">
          <el-table-column type="index" width="75" sortable></el-table-column>
          <el-table-column prop="address_book_info.real_name" label="姓名" sortable></el-table-column>
          <el-table-column prop="address_book_info.phone" label="手机号" sortable></el-table-column>
          <el-table-column label="接受状态" sortable>
            <template slot-scope="scope">
              <p>{{scope.row.status==1?"正常":"异常"}}</p>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "messageList",
      data(){
          return{
            activityList:[],
            addresseeList:[],
            addresseeID:'',
            page: 1,
            pages: 1,
            pagesize: 10,
            total: 0,
            totals: 0,
            addFormVisible: false
          }
      },
      mounted(){
        this.getSmsList();
      },
      methods:{
        //获取短信列表
        async getSmsList(){
          let params = {
            page: this.page,
            limit: this.pagesize
          }
          const res = await this.$api.getSmsList(params);
          if (res.data.level == 'success'){
            this.activityList = res.data.data;
            this.total = res.data.page_info.total
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //获取收件人列表
        async getReceivingList(){
          let params = {
            sms_id : this.addresseeID,
            limit: this.pagesize,
            page: this.pages
          }
          const res = await this.$api.getReceivingList(params);
          if (res.data.level == 'success'){
            this.addresseeList = res.data.data;
            this.totals = res.data.page_info.total;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //删除短信
        async delSms(id){
          let params = {
            id: id
          }
          const res = await this.$api.delSms(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.getSmsList();
          } else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //分页按钮显示
        currentChange(id){
          this.page = id;
          this.getSmsList();
        },
        //单击收件人
        onReceiving(id){
          this.addresseeID = id;
          this.getReceivingList();
          this.addFormVisible = true;
        }
      }
    }
</script>

<style scoped>

</style>
